<template>
  <div>
    <step :step='stepN'></step>
    <div v-if="stepN==0">
      <mt-field label="提现id" state="" placeholder="请输入到提现到的微信id" v-model.trim="weixinId"></mt-field>
      <div class="button" style="padding:10px 10px ">
        <mt-button size="large" type="primary" @click.native="cashStepOne">下一步</mt-button>
      </div>
      <div class="shuoming" v-show="showTip">
        <p class="title">
          说明
        </p>
        <p class="title">
          1.代理分成比例为40%
        </p>
        <p class="title">
          2.每天提现的次数不能超过十次
        </p>
        <p class="title">
          3.每次提现的金额不能超过2万
        </p>
        <p class="title">
          4.提现的金额必须是50的整数倍
        </p>
        <p class="title">
          5.提现输入的id是游戏中游戏id,且此id在游戏中充值过
        </p>
        <p class="title">
          6.提现的游戏id微信账号必须绑定银行卡
        </p>
         
      </div>
    </div>
    <div v-else-if="stepN==1">
      <mt-field label="提现金额" state="" placeholder="提现金额元为单位(50整数倍)" v-model.trim="CashNum"></mt-field>
      <div class="button" style="padding:10px 10px ">
        <mt-button size="large" type="primary" @click.native="cashStepTwo">下一步</mt-button>
      </div>
    </div>
    <div v-else-if="stepN==2">
      <div class="result">
        <h1 class="center">提现中，请稍等</h1>
      </div>
    </div>
    <div v-else-if="stepN==3">
      <div class="result ">
        <div v-if="resultShow">
          <h1 class="center">
            <i class="iconfont icon-xuanze"></i><br/>提现成功
          </h1>
          <span class="buttongo" @click="go">继续提现</span>
        </div>
        <div v-else>
          <h1 class="error center ">
            <i class="iconfont icon-shibai1"></i><br/>提现失败,请重试
          </h1>
          <span class="buttongo" @click="go">重试</span>
        </div>
      </div>
    </div>
    <mt-popup v-model.trim="popupVisible" position="top" :modal="false" pop-transition="popup-fade">
      {{msg}}
    </mt-popup>
  </div>
</template>
<script>
  import Step from "../../../components/Step/Step";
  import NavBar from "../../../components/Navbar/Navbar";
  import {
    MessageBox,
    Toast
  } from 'mint-ui';
  import {
    mapMutations
  } from 'vuex'
  export default {
    name: "tixian",
    components: {
      Step,
      NavBar
    },
    data() {
      return {
        stepN: 0,
        weixinId: this.$store.state.user.nPlayerId == 0 ? '' : this.$store.state.user.nPlayerId,
        CashNum: '0',
        showTip: true,
        resultShow: true,
        popupVisible: false,
        msg: ''
      };
    },
    mounted() {
      // console.log('提现');
    },
    methods: {
      ...mapMutations({
        editBalance: 'editBalance'
      }),
      cashStepOne: function() {
        this.showTip = false;
        if (this.weixinId == "") {
          MessageBox('提示', "提现Id不能为空");
          return false;
        }
        if (!this.re.test(this.weixinId)) {
          MessageBox('提示', "提现Id不是一个数字");
          return false;
        }
        let getPatam = {
          nPlayerId: parseInt(this.weixinId)
        }
        let that = this;
        this.$http.post(`${this.baseUrl}/user/GetUserInfo`, getPatam).then(response => {
          let data = response.data;
        //  console.log(data)
          // that.popupVisible = true;
          // that.msg = `${data.msg}`;
          // let time = setTimeout(function() {
          //   that.popupVisible = false;
          //   that.msg = "";
          //   clearTimeout(time);
          // }, this.SETTIME);
          if (data.code == 1) {
            // console.log(data.body);
            MessageBox({
              title: '提示',
              message: `确定提现到Id为 ${this.weixinId},昵称为 ${data.body.szNickName} 上?`,
              showCancelButton: true
            }).then(action => {
              if (action == 'cancel') {
                that.stepN = 0;
              } else if (action == 'confirm') {
                that.stepN = 1;
              }
            });;
          } else {
            MessageBox('提示', "查询出错");
          }
        })
      },
      cashStepTwo() {
        if (this.CashNum == "") {
          MessageBox('提示', "提现金额不能为空");
          return false;
        }
        if (!this.re.test(this.CashNum)) {
          MessageBox('提示', "提现金额不是一个数字");
          return false;
        }
        if (parseInt(this.CashNum) % 50 != 0) {
          MessageBox('提示', "提现金额要是50的整数倍");
          return false;
        }
        let getPatam = {
          'functionname': "Reflect",
          body: JSON.stringify({
            money: this.CashNum,
            nPlayerId: parseInt(this.weixinId)
          })
        }
        let that = this;
        this.stepN = 2;
        this.$http.post(`${this.baseUrl}/Main/AddData`, getPatam).then(response => {
          let data = response.data;
          // console.log(data)
          // that.popupVisible = true;
          // that.msg = `请求${data.msg}`;
          // let time = setTimeout(function() {
          //   that.popupVisible = false;
          //   that.msg = "";
          //   clearTimeout(time);
          // }, 3000);
          this.stepN = 3;
          if (data.code == 1) {
            this.resultShow = true;
            this.editBalance({
              balance: parseInt(that.CashNum) * 100
            })
            sessionStorage.setItem('info', JSON.stringify(that.$store.state.user))
          }
          if (data.code == 0) {
            this.resultShow = false;
            MessageBox('提示', data.msg);
          } else if (data.code == -99) {
            this.resultShow = false;
            MessageBox('提示', data.msg);
          }
        })
      },
      go() {
        this.stepN = 0;
        this.showTip = true;
      }
    },
  };
</script>

<style lang="scss" scoped>
  .mint-button {
    background-color: #fcb645;
  }
  .result {
    padding: 30px 0;
    background: #eee;
    .center {
      text-align: center;
      font-size: 30px;
      margin-bottom: 20px;
      color: green;
      i {
        font-size: 60px;
      }
      &.error {
        color: #9e9e9e;
      }
    }
  }
  .buttongo {
    margin-top: 20px;
    padding: 10px 20px;
    background: #fcb645;
    color: #fff;
    border-radius: 5px;
    width: 100px;
    text-align: center;
    margin: 0 auto;
    display: block;
  }
</style>


